<template>
    <div style="margin: 20px;">
        <el-row>
      <el-col  :span="2">
        <el-input  placeholder="请输入订单编号"  v-model="ReturnedForm.commodityId"  style="width: 150px; margin-right: 10px;"  @change="selsectcommodityId" />
      </el-col>
      <el-col :push="2" :span="2">
        <el-input  placeholder="请输入收货地址"  v-model="ReturnedForm.addressInfo"  style="width: 150px; margin-right: 10px;"  @change="selsectaddressInfo" />
      </el-col>

      <el-col :push="4" :span="2">
        <el-input  placeholder="请输入名字"  v-model="ReturnedForm.receiverName"  style="width: 150px; margin-right: 10px;"  @change="selsectreceiverName" />
      </el-col>
      <el-col :push="6" :span="2">
        <el-input  placeholder="请输人收货人电话"  v-model="ReturnedForm.receiverPhone"  style="width: 150px; margin-right: 10px;"  @change="selsecreceiverPhone" />
      </el-col>

      <el-col :push="8" :span="2">
  <el-select v-model="ReturnedForm.paymentStatus" placeholder="请选择支付状态"  style="width: 150px" @change="selsectpaymentStatus">
    <el-option
      v-for="item in cities"
      :key="item.value"
      :label="item.label"
      :value="item.value"
    /></el-select>
      </el-col>
    </el-row>
  
  
  
      <div v-for="(order, index) in ReturnedCommodity" :key="index" style="margin-top: 20px;">
        <el-descriptions :title="`订单 ${index + 1} 信息`" :column="2" border>
          <el-descriptions-item label="订单编号">{{ order.commodityId }}</el-descriptions-item>
          <el-descriptions-item label="下单时间">{{ formatDate(order.createdAt) }}</el-descriptions-item>
          <el-descriptions-item label="收货人">{{ order.receiverName }} ({{ order.receiverPhone }})</el-descriptions-item>
          <el-descriptions-item label="地址">{{ order.addressInfo }}</el-descriptions-item>
          <el-descriptions-item label="支付状态">{{ paymentStatusText(order.paymentStatus) }}</el-descriptions-item>
          <el-descriptions-item label="发货状态">{{ shippingStatusText(order.shippingStatus) }}

            <el-popover
    placement="bottom"
    title="物流单号"
    :width="200"
    trigger="click"
  >
                <!-- 使用插槽动态设置 Popover 内容 -->
  <div >
    <p>{{ order.oddNumbers==0? '暂无单号': order.oddNumbers}}</p>

    <el-button type="text" size="small" >查看物流信息</el-button>
  </div>


    <template #reference>
      <el-button class="m-2"  type="text" style="margin-left: 20px;">查看物流单号</el-button>
    </template>
  </el-popover>


          </el-descriptions-item>
        </el-descriptions>
  
        <el-table :data="order.commodityDetails || []" style="width: 100%; margin-top: 20px;" stripe>
          <el-table-column prop="productName" label="商品名称"></el-table-column>
          <el-table-column prop="price" label="单价" width="180">
            <template #default="scope">￥{{ scope.row.price }}</template>
          </el-table-column>
          <el-table-column prop="quantity" label="数量" width="180"></el-table-column>
          <el-table-column label="总价" width="180">
            <template #default="scope">￥{{ scope.row.totalPrice }}</template>
          </el-table-column>
          <el-table-column prop="notes" label="备注"></el-table-column>
        </el-table>
  
        <div class="order-total" style="text-align: right; margin-top: 20px;">
          <el-row>
            <el-col :span="4">
              <span >订单总金额：￥{{ order.total }}</span>
            </el-col>

            <el-col :push="14" :span="4">
              <span>折扣后价格：￥{{ order.discountedPrices }}</span>
            </el-col>
          </el-row>
        </div>
        <hr />
      </div>
  
    
     
  
      <div class="demo-pagination-block">
        <el-pagination
          v-model:current-page="ReturnedForm.pageNum"
          v-model:page-size="ReturnedForm.pageSize"
          :page-sizes="[1, 4, 6, 8]"
          layout="total, sizes, prev, pager, next, jumper"
          :total="ReturnedCommodityTotal"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>
  </template>
  
  <script>
  export default {
    name: 'ManagerPendingShipment',
    data() {
      return {
        ReturnedForm:{
          pageNum: 1,
          pageSize: 10,
          commodityId: null,
          addressInfo: null,
          receiverName: null,
          receiverPhone: null,
          paymentStatus: null,
          shippingStatus: null,
          createdAt: null,
        },
        ReturnedCommodity:[],
        ReturnedCommodityTotal:0,
        cities: [
        { label: '未支付', value: '0' },
        { label: '已支付', value: '1' },
        { label: '全部', value: null },
      ],
    
      };
    },
    methods: {
        selsectcommodityId() {
      if (this.ReturnedForm.commodityId == null) {
        alert("请输入订单编号");
        return;
      }
     this.getReturned()
    },
        selsectpaymentStatus(){
      console.log(this.ReturnedForm.paymentStatus);
     this.getReturned()

    },
    selsecreceiverPhone(){
      if (this.ReturnedForm.receiverPhone == null) {
        alert("请输入收货人电话");
        return;
      }
     this.getReturned()
    },
    selsectreceiverName(){
      if (this.ReturnedForm.receiverName == null) {
        alert("请输入收货人名字");
        return;
      }
     this.getReturned()
    },

    selsectaddressInfo(){
      if (this.ReturnedForm.addressInfo == null) {
        alert("请输入订单地址");
        return;
      }
     this.getReturned()

    },

    //   getReturnedCommodity() {
    //     this.$http.post("/order/commodity/selsectReturnedCommoditymanager",this.ReturnedForm)
    //       .then(resp => {
    //         this.ReturnedCommodity = resp.data.data.list;
    //         this.ReturnedCommodityTotal = resp.data.data.total;
    //         if (this.ReturnedCommodityTotal == 0) {
    //           this.$message.error("没有待发货订单");
    //         }
    //       });
    //   },
    getReturned(){
    this.$http.post("/order/commodity/Returned", this.ReturnedForm)
        .then(resp => {
            // 获取订单列表
            this.ReturnedCommodity = resp.data.data.list;

            // 对订单进行排序，已支付的在前，未支付的在后
            this.ReturnedCommodity.sort((a, b) => {
                return (b.paymentStatus - a.paymentStatus); // 1 - 0 = 1，保持 1 在前
            });

            this.ReturnedCommodityTotal = resp.data.data.total;
            if (this.ReturnedCommodityTotal == 0) {
                this.$message.error("没有待发货订单");
            }
        }).catch(error => {
          console.error("获取失败:", error);
          this.$message.error("获取失败，请稍后再试。");
        });
},
     
      handleSizeChange(val) {
        this.ReturnedForm.pageSize = val;
       this.getReturned()
      },
      handleCurrentChange(val) {
        this.ReturnedForm.pageNum = val;
       this.getReturned()
      },
  
      formatDate(dateString) {
        if (!dateString) return '';
        const date = new Date(dateString);
        return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')} ${String(date.getHours()).padStart(2, '0')}:${String(date.getMinutes()).padStart(2, '0')}`;
      },
      paymentStatusText(status) {
        return status === 1 ? '已支付' : '未支付';
      },
      shippingStatusText(status) {
        const statusMap = ['未发货', '已发货', '已签收', '退货中', '已退货'];
        return statusMap[status] || '未知状态';
      },
    
    },
    mounted() {
        this.getReturned();
      
    },
  };
  </script>
  
  <style scoped>
  /* 样式可以根据需要调整 */
  
  .el-dropdown-link {
    color: #5DE2E7; /* 改变为你想要的颜色 */
  }
  </style>